<template>
  <je-modal
    v-model:visible="visible"
    class="inquire-choose-value-config"
    width="1200px"
    :title="title"
    :resize="false"
    :maximizable="false"
    cancel-button
    :ok-button="handleOk"
    @close="handleClose"
  >
    <je-form
      ref="formRef"
      class="form"
      :rules="rules"
      :model="formState"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      size="small"
      autocomplete="off"
    >
      <je-collapse v-model:activeKey="activeKey" expand-icon-position="right">
        <je-collapse-panel key="1" header="核心配置">
          <je-row>
            <je-col :span="8">
              <je-form-item label="目标功能" name="funcName">
                <je-grid-select
                  v-model:value="formState.funcName"
                  name="funcName"
                  config-info="JE_CORE_FUNCINFO,funcName~funcCode~funcId,FUNCINFO_FUNCNAME~FUNCINFO_FUNCCODE~JE_CORE_FUNCINFO_ID,S"
                  :querys="[
                    {
                      code: 'FUNCINFO_FUNCTYPE',
                      type: 'in',
                      value: ['TREE', 'FUNC', 'VIEW'],
                      cn: 'and',
                    },
                  ]"
                  @select="selectfuncNameRow"
                /> </je-form-item
            ></je-col>
            <je-col :span="8">
              <je-form-item label="功能编码" name="funcCode">
                <je-input v-model:value="formState.funcCode" disabled />
              </je-form-item>
            </je-col>
            <je-col :span="8">
              <je-form-item label="使用方案" name="schemeType">
                <je-select v-model:value="formState.schemeType" allow-clear>
                  <je-select-option
                    v-for="(item, index) in [
                      {
                        code: 'grid',
                        text: '默认列表方案',
                      },
                    ]"
                    :key="index"
                    :value="item.code"
                  >
                    {{ item.text }}
                  </je-select-option>
                </je-select>
              </je-form-item></je-col
            >
          </je-row>
          <je-row>
            <!-- <je-col :span="16">
              <je-form-item label="条件说明" name="RESOURCEFIELD_CONDITION_DESC">
                <je-input v-model:value="formState.RESOURCEFIELD_CONDITION_DESC"> </je-input>
              </je-form-item>
            </je-col> -->
            <je-col :span="8">
              <je-form-item label="选择方式" name="selModel">
                <je-select v-model:value="formState.selModel" allow-clear>
                  <je-select-option
                    v-for="(item, index) in [
                      { code: 'S', text: '单选' },
                      { code: 'M', text: '多选' },
                    ]"
                    :key="index"
                    :value="item.code"
                  >
                    {{ item.text }}
                  </je-select-option>
                </je-select>
              </je-form-item>
            </je-col>
            <je-col :span="8">
              <je-form-item label="允许穿透" name="penetrate">
                <je-select v-model:value="formState.penetrate" allow-clear>
                  <je-select-option
                    v-for="(item, index) in [
                      { code: '1', text: '是' },
                      { code: '0', text: '否' },
                    ]"
                    :key="index"
                    :value="item.code"
                  >
                    {{ item.text }}
                  </je-select-option>
                </je-select>
              </je-form-item>
            </je-col>
          </je-row>
          <je-row>
            <je-col :span="24">
              <je-form-item name="RESOURCEFIELD_WHERESQL">
                <template #label>
                  <div
                    class="iconWrap"
                    @click.stop="
                      showModal({
                        type: 'SqlFilter',
                        title: '过滤配置',
                        key: 'RESOURCEFIELD_WHERESQL',
                        value: formState.RESOURCEFIELD_WHERESQL,
                      })
                    "
                  >
                    <i class="fal fa-filter" style="color: #8d98ab"></i>
                    过滤条件
                  </div>
                </template>
                <je-input v-model:value="formState.RESOURCEFIELD_WHERESQL" />
              </je-form-item>
            </je-col>
          </je-row>
          <je-row>
            <je-col :span="24">
              <je-form-item label="条件说明" name="RESOURCEFIELD_CONDITION_DESC">
                <je-input v-model:value="formState.RESOURCEFIELD_CONDITION_DESC"> </je-input>
              </je-form-item>
            </je-col>
          </je-row>
        </je-collapse-panel>

        <!-- <je-collapse-panel key="2" header="辅助配置">
          <je-row>
            <je-col>
              <je-form-item label="可添加" name="enableAdd">
                <je-switch v-model:value="formState.enableAdd" mode="checkbox" />
              </je-form-item>
            </je-col>

            <je-col>
              <je-form-item label="链接名" name="addText">
                <je-input v-model:value="formState.addText" />
              </je-form-item>
            </je-col>

            <je-col>
              <je-form-item label="公用" name="addCommon">
                <je-switch v-model:value="formState.addCommon" mode="checkbox" />
              </je-form-item>
            </je-col>

            <je-col>
              <je-form-item label="可用角色" name="addPermText">
                <je-tree-select
                  v-model:value="formState.addPermText"
                  name="addPermText"
                  config-info="JE_RBAC_ROLETREE,addPerm~addPermText,id~text,M"
                  :querys="permArr"
                  :select-options="selectOptions"
                />
              </je-form-item>
            </je-col>
          </je-row>
        </je-collapse-panel> -->

        <je-collapse-panel key="3" header="带值规则">
          <div class="tableWrap">
            <je-table
              class="table"
              border
              show-overflow="ellipsis"
              keep-source
              sync-resize
              auto-resize
              draggable
              :style="`height: ${tableHeight} `"
              :scroll-y="{ mode: 'wheel' }"
              :edit-config="{
                trigger: 'click',
                mode: 'cell',
                showUpdateStatus: true,
              }"
              :store="codes"
              size="mini"
              header-align="center"
              @drop="codesArrDrop"
            >
              <!--@current-change="getSelectData" -->
              <je-table-column field="index" title="序号" width="50" align="center">
              </je-table-column>
              <je-table-column field="pkName" title="唯一" width="50" align="center" type="switch">
                <!-- <template #default="{ row }"> -->
                <!-- <je-switch v-model:value="row.pkName" mode="checkbox" /> -->
                <!-- </template> -->
              </je-table-column>
              <je-table-column field="name" title="目标功能字段">
                <template #edit="{ row }">
                  <je-input v-model:value="row.name" disabled />
                </template>
              </je-table-column>
              <je-table-column field="code" title="字段编码" width="220">
                <template #edit="{ row }">
                  <je-input v-model:value="row.code" disabled />
                </template>
              </je-table-column>
              <je-table-column width="40" align="center">
                <template #header>
                  <i
                    style="font-size: 16px; cursor: pointer"
                    class="fal fa-plus"
                    @click="addColumn"
                  ></i>
                </template>
                <template #default="{ row }">
                  <i
                    style="font-size: 16px; cursor: pointer"
                    class="fal fa-times"
                    @click="deleteColumn('codes', row)"
                  ></i>
                </template>
              </je-table-column>
            </je-table>
            <div style="cursor: pointer"
              ><je-tooltip
                title="基于左侧数据匹配右侧数据"
                @click="intelligentTransition(formState.RESOURCEFIELD_FUNCINFO_ID, 'left')"
              >
                <i
                  class="fal fa-angle-double-right icon-class"
                  style="margin-bottom: 20px"
                ></i> </je-tooltip
              ><br />
              <je-tooltip
                title="基于右侧数据匹配左侧数据"
                @click="intelligentTransition(formState.funcId, 'right')"
              >
                <i class="fal fa-angle-double-left icon-class"></i>
              </je-tooltip>
            </div>
            <je-table
              class="table"
              border
              show-overflow="ellipsis"
              keep-source
              :style="`height: ${tableHeight} `"
              :scroll-y="{ mode: 'wheel' }"
              draggable=""
              :edit-config="{
                trigger: 'click',
                mode: 'cell',
                showUpdateStatus: true,
              }"
              :store="selfCodes"
              size="mini"
              header-align="center"
              @drop="selfCodesArrDrop"
            >
              <je-table-column field="index" title="序号" width="50" align="center">
              </je-table-column>
              <je-table-column field="name" title="本功能字段">
                <template #edit="{ row }">
                  <je-input v-model:value="row.name" disabled />
                </template>
              </je-table-column>
              <je-table-column field="code" title="字段编码" width="220">
                <template #edit="{ row }">
                  <je-input v-model:value="row.code" disabled />
                </template>
              </je-table-column>
              <je-table-column width="40" align="center">
                <template #header>
                  <i
                    style="font-size: 16px; cursor: pointer"
                    class="fal fa-plus"
                    @click="addColumnSelf"
                  ></i>
                </template>
                <template #default="{ row }">
                  <i
                    style="font-size: 16px; cursor: pointer"
                    class="fal fa-times"
                    @click="deleteColumn('selfCodes', row)"
                  ></i>
                </template>
              </je-table-column>
            </je-table>
          </div>
          <template #extra
            ><i
              :class="[activeKey.length > 1 ? 'jeicon jeicon-an' : 'jeicon jeicon-packup']"
              style="padding-right: 30px; cursor: pointer"
              @click="handleClick"
            ></i
          ></template>
        </je-collapse-panel>
      </je-collapse>
    </je-form>

    <div v-if="modalOption.modalFlag">
      <component
        :is="modalOption.activeModal"
        :visble="modalOption.modalFlag"
        :record-data="modalOption.recordData"
        @btnClick="btnClick"
      ></component>
    </div>
  </je-modal>
</template>

<script>
  import { ref, toRefs, reactive, defineComponent, onMounted } from 'vue';
  import { Collapse, Row, Col } from 'ant-design-vue';

  // import SqlFilter from '@/components/form-field-config/components/sql-filter.vue';
  // import { sqlEditorModal } from '@/helper/index.js';
  import { showFuncQuerys } from '@jecloud/func';

  import { SelectWindow } from '@jecloud/func';

  import {
    Grid,
    Modal,
    Form,
    Input,
    Select,
    Checkbox,
    InputSelect,
    Data,
    Button,
    Tooltip,
    Switch,
  } from '@jecloud/ui';

  import { decode, encode, isNotEmpty } from '@jecloud/utils';

  import {
    getData as FuncDetail,
    ChangeTranslateSql,
    SearchintelligentTransition,
  } from '@/api/index';
  // import { useFuncStore } from '@/store/func-store';

  export default defineComponent({
    name: 'InquireChooseValueConfig',
    components: {
      JeModal: Modal,
      JeCollapse: Collapse,
      JeCollapsePanel: Collapse.Panel,
      JeRow: Row,
      JeCol: Col,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeSelect: Select,
      JeSelectOption: Select.Option,
      JeCheckbox: Checkbox,
      JeTable: Grid,
      JeTableColumn: Grid.Column,
      JeGridSelect: InputSelect.Grid,
      JeTreeSelect: InputSelect.Tree,
      JeButton: Button,
      JeTooltip: Tooltip,
      JeSwitch: Switch,
      // SqlFilter,
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
      recordData: {
        type: Object,
        default: () => {},
      },
    },
    emits: ['changeModal'],
    setup(props, { emit }) {
      // const funcStore = useFuncStore();
      const state = reactive({
        tableHeight: `calc(100vh - 520px)`,
        visible: props.visble,
        title: props.recordData.title,
        activeKey: ['1', '3'],
        formRef: ref(),
        formState: props.recordData,
        defaultValue: '默认列表方案',
        labelCol: {
          style: { width: '100px' },
        },
        wrapperCol: {},
        rules: {},
        selfCodes: Data.Store.useGridStore({
          data: [],
        }),
        codes: Data.Store.useGridStore({
          data: [],
        }),
        permArr: [{ code: 'ROLERANK', type: '=', value: 'SYS' }],
        funcQueryName: [
          // {
          //   code: 'SY_PRODUCT_ID',
          //   type: '=',
          //   value: funcStore.product.code,
          //   cn: 'and',
          // },
          {
            code: 'FUNCINFO_FUNCTYPE',
            type: 'in',
            value: ['TREE', 'FUNC', 'VIEW'],
            cn: 'and',
          },
        ],
        JE_CORE_FUNCINFO_ID: '', // 目标功能的功能ID
      });

      const modalOption = reactive({
        modalFlag: false, // 默认modal都是隐藏的false
        activeModal: '', // 默认没有激活的弹窗类型
      });
      const selectOptions = {
        selectExp: "'{nodeInfoType}' != 'folder'",
        title: '选择可用角色',
      };
      const methods = {
        // 智能切换
        intelligentTransition(id, type) {
          const codeArr = [];
          // 获取当前功能字段的字符串state.selfCodes.data
          if (type == 'left') {
            state.codes.data.forEach((item) => {
              const ele = `${item.code}~${item.name}`;
              codeArr.push(ele);
            });
          }
          if (type == 'right') {
            state.selfCodes.data.forEach((item) => {
              const ele = `${item.code}~${item.name}`;
              codeArr.push(ele);
            });
          }

          const params = {
            targetFuncId: id,
            consultFields: codeArr.join(','),
          };
          if (!params.consultFields && type == 'left') {
            Modal.alert('请先添加目标功能字段！', 'info');
            return false;
          }
          if (!params.consultFields && type == 'right') {
            Modal.alert('请先添加本功能字段！', 'info');
            return false;
          }
          SearchintelligentTransition(params)
            .then((res) => {
              if (type == 'left') {
                const codeRes = res.data.current || [];
                const selfRes = res.data.target || [];
                let newCodes = [];
                const newSelf = [];
                const newCodesConcat = [];
                codeRes.map((item) => {
                  const arrItem = item.split('~');
                  // [0]是code
                  const newItemArr = state.codes.data.filter((_item) => arrItem[0] == _item.code);
                  newItemArr.map((_item, index) => {
                    if (index < 1) {
                      newCodes.push(_item);
                    } else {
                      newCodesConcat.push(_item);
                    }
                  });
                });
                newCodes = newCodes.concat(newCodesConcat);
                newCodes.map((item, index) => {
                  item.index = index + 1;
                  return item;
                });
                state.codes.loadData(newCodes);
                selfRes.forEach((item, index) => {
                  const arrItem = item.split('~');
                  // [0]是code
                  const newItem = {
                    code: arrItem[0],
                    name: arrItem[1],
                    pkName: '0',
                    index: index + 1,
                  };
                  newSelf.push(newItem);
                });
                state.selfCodes.loadData(newSelf);
              } else {
                const codeRes = res.data.current || [];
                const selfRes = res.data.target || [];
                let newCodes = [];
                const newSelf = [];
                const newCodesConcat = [];
                codeRes.map((item) => {
                  const arrItem = item.split('~');
                  // [0]是code
                  const newItemArr = state.selfCodes.data.filter(
                    (_item) => arrItem[0] == _item.code,
                  );
                  newItemArr.map((_item, index) => {
                    if (index < 1) {
                      newCodes.push(_item);
                    } else {
                      newCodesConcat.push(_item);
                    }
                  });
                });
                newCodes = newCodes.concat(newCodesConcat);
                newCodes.map((item, index) => {
                  item.index = index + 1;
                  return item;
                });
                state.selfCodes.loadData(newCodes);
                selfRes.forEach((item, index) => {
                  const arrItem = item.split('~');
                  // [0]是code
                  const newItem = {
                    code: arrItem[0],
                    name: arrItem[1],
                    pkName: '0',
                    index: index + 1,
                  };
                  newSelf.push(newItem);
                });
                state.codes.loadData(newSelf);
              }
            })
            .catch((err) => {
              Modal.alert(err.message, 'error');
            });
        },
        handleClick(event) {
          if (state.activeKey.length == 1) {
            state.activeKey = ['1', '2', '3'];
            state.tableHeight = `calc(100vh - 520px)`;
          } else {
            state.tableHeight = `calc(100vh - 340px)`;
            state.activeKey = ['3'];
          }
          event.stopPropagation();
        },
        // 拖拽排序目标功能字段
        codesArrDrop() {
          state.codes.data.forEach((item, index_) => {
            item.index = index_ + 1;
          });
        },
        // 本功能字段
        selfCodesArrDrop() {
          state.selfCodes.data.forEach((item, index_) => {
            item.index = index_ + 1;
          });
        },
        // 选择目标功能，获取功能Id,code
        selectfuncNameRow({ rows }) {
          if (rows && rows.length) {
            if (rows[0].JE_CORE_FUNCINFO_ID != state.formState.funcId) {
              state.formState.funcId = rows[0].JE_CORE_FUNCINFO_ID;
              state.formState.funcCode = rows[0].FUNCINFO_FUNCCODE;
              state.codes.data = [];
            }
          }
        },
        handleClose() {
          state.visible = false;
          emit('changeModal', { visible: false });
        },
        handleOk() {
          let {
            funcCode,
            selModel,
            penetrate,
            enableAdd,
            addText,
            addCommon,
            addPerm,
            addPermText,
            schemeType,
          } = state.formState;
          let cfgs = {};
          let otherCfgs = state.otherCfgs;
          let pkNames = [];

          cfgs = [funcCode, [], [], selModel];

          state.selfCodes.data.forEach((item) => {
            cfgs[1].push(item.code);
          });
          cfgs[1] = cfgs[1].join('~');

          state.codes.data.forEach((item) => {
            if (item.pkName == '1') {
              pkNames.push(item.code);
            }
            cfgs[2].push(item.code);
          });
          cfgs[2] = cfgs[2].join('~');

          cfgs = cfgs.join(',');

          if (state.codes.data.length !== state.selfCodes.data.length) {
            Modal.alert('两组字段对应的条数不相同，请重新选择！', 'warning');
            return false;
          }

          if (pkNames.length > 1) {
            Modal.alert('字段唯一标识只能选择一个！', 'warning');
            return false;
          } else {
            otherCfgs.pkName = pkNames[0] || '';
          }

          //schemeType 使用方案
          otherCfgs.schemeType = schemeType;
          //penetrate 允许穿透
          otherCfgs.penetrate = penetrate || '0';
          //enableAdd 可添加
          otherCfgs.enableAdd = enableAdd;
          // addText 连接名
          otherCfgs.addText = addText || '';
          //addCommon 共用
          otherCfgs.addCommon = addCommon;
          //addPerm,addPermText 可用角色
          otherCfgs.addPerm = addPerm || '';
          otherCfgs.addPermText = addPermText || '';

          state.visible = false;
          emit('changeModal', {
            type: 'InquireChooseValueConfig',
            visible: false,
            data: {
              RESOURCEFIELD_CONFIGINFO: cfgs,
              RESOURCEFIELD_WHERESQL: state.formState.RESOURCEFIELD_WHERESQL,
              RESOURCEFIELD_OTHERCONFIG: encode(otherCfgs),
              RESOURCEFIELD_CONDITION_DESC: state.formState.RESOURCEFIELD_CONDITION_DESC,
            },
          });

          return false;
        },

        showModal(obj) {
          if (!state.formState.funcCode) {
            Modal.alert('请先选择目标功能！');
            return false;
          }
          showFuncQuerys({
            value: state.formState[obj.key],
            funcId: state.formState.funcId,
            callback: (value) => {
              state.formState[obj.key] = value;
            },
          });
          // sqlEditorModal({
          //   value: state.formState[obj.key],
          //   funcId: state.formState.funcId,
          //   callback: (res) => {
          //     state.formState[obj.key] = res;
          //   },
          // });
        },

        btnClick(obj) {
          modalOption.modalFlag = false;

          if (obj.type === 'ok') {
            state.formState[modalOption.key] = obj.value;
          }
        },
        // 目标功能添加字段
        addColumn() {
          if (!state.formState.funcName) {
            Modal.alert('请先选择目标功能在进行字段添加！', 'info');
            return false;
          }
          //列表现有的code值
          const columnCode = [];
          state.codes.data.forEach((item) => {
            columnCode.push(item.code);
          });

          // 目标功能中字段的选择
          SelectWindow.show({
            title: '目标功能字段',
            type: 'grid',
            orders: [
              // { code: 'TABLECOLUMN_CLASSIFY', type: 'ASC' },
              { code: 'SY_ORDERINDEX', type: 'ASC' },
            ],
            querys: [
              {
                code: 'RESOURCECOLUMN_FUNCINFO_ID',
                value: state.formState.funcId,
                type: '=',
                cn: 'and',
              },
              // {
              //   code: 'RESOURCECOLUMN_CODE',
              //   value: columnCode,
              //   type: 'notIn',
              //   cn: 'and',
              // },
              {
                code: 'RESOURCECOLUMN_XTYPE',
                value: 'uxcolumn',
                type: '=',
                cn: 'and',
              },
              // { code: 'TABLECOLUMN_ISCREATE', type: '=', value: '1', cn: 'and' },
            ],
            configInfo: 'JE_CORE_RESOURCECOLUMN,,,M',
            callback: function ({ rows }) {
              //  对选择数据进行处理，变成code , text
              if (rows && rows.length) {
                const data = [];
                rows.forEach((item, index) => {
                  const { RESOURCECOLUMN_CODE, RESOURCECOLUMN_NAME } = item;
                  data.push({
                    code: RESOURCECOLUMN_CODE,
                    name: RESOURCECOLUMN_NAME,
                    pkName: '0',
                    index: state.codes.data.length + index + 1,
                  });
                });
                state.codes.insert(data, -1);
              }
            },
          });
        },
        // 本功能添加字段
        addColumnSelf() {
          // 本功能ID： state.formState.RESOURCEFIELD_FUNCINFO_ID

          //列表现有的code值
          const columnCode = [];
          state.selfCodes.data.forEach((item) => {
            columnCode.push(item.code);
          });

          SelectWindow.show({
            title: '本功能字段',
            type: 'grid',
            orders: [
              // { code: 'TABLECOLUMN_CLASSIFY', type: 'ASC' },
              { code: 'SY_ORDERINDEX', type: 'ASC' },
            ],
            querys: [
              {
                code: 'RESOURCECOLUMN_FUNCINFO_ID',
                value: state.formState.RESOURCEFIELD_FUNCINFO_ID,
                type: '=',
                cn: 'and',
              },
              {
                code: 'RESOURCECOLUMN_CODE',
                value: columnCode,
                type: 'notIn',
                cn: 'and',
              },
              {
                code: 'RESOURCECOLUMN_XTYPE',
                value: 'uxcolumn',
                type: '=',
                cn: 'and',
              },
            ],
            configInfo: 'JE_CORE_RESOURCECOLUMN,,,M',
            callback: function ({ rows }) {
              //  对选择数据进行处理，变成code , text
              if (rows && rows.length) {
                const data = [];
                rows.forEach((item, index) => {
                  const { RESOURCECOLUMN_CODE, RESOURCECOLUMN_NAME } = item;
                  data.push({
                    code: RESOURCECOLUMN_CODE,
                    name: RESOURCECOLUMN_NAME,
                    pkName: '0',
                    index: state.selfCodes.data.length + index + 1,
                  });
                });
                state.selfCodes.insert(data, -1);
              }
            },
          });
        },
        //删除列
        deleteColumn(key, row) {
          state[key].remove(row);
        },
        //获得功能数据
        async getFuncDetail() {
          const params = {
            tableCode: 'JE_CORE_FUNCINFO',
            limit: 1,
            queryColumns: 'JE_CORE_FUNCINFO_ID,FUNCINFO_FUNCNAME',
            j_query: JSON.stringify({
              custom: [
                {
                  code: 'FUNCINFO_FUNCCODE',
                  value: state.formState.funcCode,
                  type: '=',
                  cn: 'and',
                },
              ],
            }),
          };

          let result = await FuncDetail(params).then((res) => {
            if (res.length === 0) {
              Modal.alert('功能不存在！');
            } else {
              return res[0];
            }
          });

          return result;
        },
        //根据功能id获得字段信息
        async getFuncField(funcId) {
          const params = {
            tableCode: 'JE_CORE_RESOURCECOLUMN',
            limit: -1,
            queryColumns: 'RESOURCECOLUMN_NAME,RESOURCECOLUMN_CODE',
            j_query: JSON.stringify({
              custom: [
                {
                  code: 'RESOURCECOLUMN_FUNCINFO_ID',
                  value: funcId,
                  type: '=',
                  cn: 'and',
                },
              ],
            }),
          };
          const columnObj = {};
          const columns = await FuncDetail(params).then((res) => {
            return res;
          });
          //封装成对象方便使用
          if (columns && columns.length > 0) {
            columns.forEach((item) => {
              columnObj[item.RESOURCECOLUMN_CODE] = item.RESOURCECOLUMN_NAME;
            });
          }
          return columnObj;
        },

        //回显带值规则列表数据
        async setTablesData(targetTable, oneselfTable) {
          //回显目标功能列表数据 codes
          if (isNotEmpty(targetTable)) {
            const targetTableDatas = [];
            const columnCodes = targetTable.split('~');
            //获得字段的信息,用于回显字段name
            const targetColums = await methods.getFuncField(state.formState.funcId);
            if (columnCodes && columnCodes.length > 0) {
              columnCodes.forEach((item, index) => {
                targetTableDatas.push({
                  code: item,
                  name: targetColums[item] || item,
                  index: index + 1,
                });
              });
            }

            if (targetTableDatas.length > 0) {
              state.codes.loadData(targetTableDatas);
            }
          }

          //回显本功能字段列表
          if (isNotEmpty(oneselfTable)) {
            const toneselfTableDatas = [];
            const columnCodes = oneselfTable.split('~');
            //获得字段的信息,用于回显字段name
            const toneselfColums = await methods.getFuncField(
              state.formState.RESOURCEFIELD_FUNCINFO_ID,
            );
            if (columnCodes && columnCodes.length > 0) {
              columnCodes.forEach((item, index) => {
                toneselfTableDatas.push({
                  code: item,
                  name: toneselfColums[item] || item,
                  index: index + 1,
                });
              });
            }
            if (toneselfTableDatas.length > 0) {
              state.selfCodes.loadData(toneselfTableDatas);
            }
          }
        },

        handleTranslate() {
          const params = {
            funcId: state.formState.RESOURCEFIELD_FUNCINFO_ID,
            sql: state.formState.RESOURCEFIELD_WHERESQL,
          };
          ChangeTranslateSql(params).then((res) => {
            state.formState.sqlRemark = res;

            // Modal.notice('操作成功', 'success');
          });
        },
        //回显数据
        async doDataPlayback() {
          const { RESOURCEFIELD_CONFIGINFO, RESOURCEFIELD_OTHERCONFIG } = state.formState;
          //根据配置信息回显数据
          const cfgs = RESOURCEFIELD_CONFIGINFO ? RESOURCEFIELD_CONFIGINFO.split(',') : '';

          if (isNotEmpty(cfgs)) {
            //获取功能编码
            const funcCode = cfgs[0];
            if (isNotEmpty(funcCode)) {
              //回显功能code
              state.formState.funcCode = funcCode;
              //根据功能编码获得功能id,name;
              let result = await methods.getFuncDetail();
              if (isNotEmpty(result)) {
                //回显功能id和name
                state.formState.funcName = result.FUNCINFO_FUNCNAME;
                state.formState.funcId = result.JE_CORE_FUNCINFO_ID;
              }
            }
            //回显选择方式
            const selModel = cfgs[3];
            state.formState.selModel = isNotEmpty(selModel) ? selModel : 'S';

            //回显带值规则
            await methods.setTablesData(cfgs[2], cfgs[1]);
          } else {
            state.formState.selModel = 'S';
          }
          //回显辅助配置项 RESOURCEFIELD_OTHERCONFIG
          const config = decode(RESOURCEFIELD_OTHERCONFIG ?? '{}') ?? {};
          state.otherCfgs = config;
          //schemeType 使用方案
          state.formState.schemeType = config.schemeType || 'grid';
          //penetrate 允许穿透
          state.formState.penetrate = config.penetrate || '0';
          //enableAdd 可添加
          state.formState.enableAdd = config.enableAdd;
          // addText 连接名
          state.formState.addText = config.addText || '';
          //addCommon 共用
          state.formState.addCommon = config.addCommon;
          //addPerm,addPermText 可用角色
          state.formState.addPerm = config.addPerm || '';
          state.formState.addPermText = config.addPermText || '';
          //pkName 唯一

          const pkName = config.pkName;
          if (isNotEmpty(pkName)) {
            state.codes.data.forEach((item) => {
              if (item.code == pkName) {
                item.pkName = '1';
              } else {
                item.pkName = '0';
              }
            });
            state.codes.loadData(state.codes.data);
          }
        },
      };

      onMounted(async () => {
        methods.doDataPlayback();
      });

      return {
        ...toRefs(state),
        ...methods,
        modalOption,
        disabled: ref(false),
        selectOptions,
      };
    },
  });
</script>
<style lang="less" scoped>
  .inquire-choose-value-config {
    .inputWrap {
      position: relative;
      .setIcon {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translate(0, -50%);
        cursor: pointer;
      }
    }
    .iconWrap {
      cursor: pointer;
    }
    .icon-class {
      font-size: 16px;
      width: 60px;
      height: 40px;
      background: #e6e6e6;
      text-align: center;
      line-height: 40px;
      border-radius: 2px;
      margin: 0 10px;
    }
    .tableWrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .table {
        width: 48%;
      }
    }
  }
</style>
